<template>
  <div class="liveplayer">
    <LivePlayer
      v-if="isAlive"
      ref="videoRef"
      v-bind="getProperty"
      aspect="fullscreen"
      @play="handlePlay"
      @pause="handlePause"
      @ended="handleEnded"
      @timeupdate="handleUpdate"
      @custom-buttons="handleCustom"
    />
  </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer-v3'
import { defineComponent, ref, reactive, toRefs, computed, nextTick } from 'vue'

const DEFAULT_OPTIONS = {
  /* 视频地址 */
  videoUrl: null,
  /* 视频标题 */
  videoTitle: '视频',
  /* 封面 */
  poster: null,
  /* 没有地址或异常时显示 */
  alt: `<div class="loading">
      <span style="--s:1">L</span>
      <span style="--s:2">O</span>
      <span style="--s:3">A</span>
      <span style="--s:4">D</span>
      <span style="--s:5">I</span>
      <span style="--s:6">N</span>
      <span style="--s:7">G</span>
      <span style="--s:8">...</span>
  </div>`,
  /* 自动播放 */
  autoplay: true,
  /* 显示控制栏 */
  controls: false,
  /* 是否直播 */
  live: false,
  /* 是否静音 */
  muted: true,
  /* 视频显示区域宽高比，全屏: fullscreen，全屏时需设置宽高 */
  aspect: '16:9',
  /* 流畅模式 */
  fluent: false,
  /* 是否拉伸 */
  stretch: false,
  /* m3u8加载超时 */
  timeout: 20,
  /* 加载 */
  loading: true,
  /* 是否隐藏工具栏按钮 */
  showCustomButton: true,
  /* 是否隐藏屏幕中间的播放按钮 */
  hideBigPlayButton: false,
  /* 是否隐藏快照按钮 */
  hideSnapshotButton: true,
  /* 是否隐藏全屏按钮 */
  hideFullscreenButton: false,
  /* hls流播放清晰度yh: 原始分辨率，fhd: 超清，hd: 高清，sd: 标清 */
  resolution: 'yh',
  /* hls播放默认分辨率 */
  resolutiondefault: 'yh',
  /* hls播放倍速列表 [0.5, 1, 2, 3] */
  playbackRates: null,
  /* hls播放默认倍速 */
  playbackRate: 1,
  /* 自定义按钮(按钮名称:class) */
  customButtons: 'refresh:vjs-icon-replay',
  /* 双击全屏 */
  dblclickFullscreen: false
}

export default defineComponent({
  name: 'VideoPlayer',
  components: { LivePlayer },
  props: {
    options: {
      type: Object,
      default: () => {

      }
    },
    play: {
      type: Function,
      default: null
    }
  },
  emits: ['play', 'pause', 'ended', 'time-update'],
  setup(props, { emit }) {
    const videoRef = ref(null)
    const data = reactive({
      isAlive: true
    })
    const getProperty = computed(() => {
      return {
        ...DEFAULT_OPTIONS,
        ...props.options
      }
    })
    /**
     * @description: 开始播放
     * @param {Number} time
     * @return {Number}
     */
    const handlePlay = (time) => {
      emit('play', time)
    }

    /**
     * @description: 暂停播放
     * @param {Number} time
     * @return {Number}
     */
    const handlePause = (time) => {
      emit('pause', time)
    }

    /**
     * @description: 播放结束
     * @param {Number} time
     * @return {Number}
     */
    const handleEnded = (time) => {
      emit('ended', time)
    }

    /**
     * @description: 获取视频播放时间
     * @param {Number} time
     * @return {Number}
     */
    const handleUpdate = (time) => {
      emit('time-update', time)
    }

    /**
     * @description: 获取视频时长
     * @return {Number}
     */
    const getDuration = () => {
      return videoRef.value.getDuration()
    }

    /**
     * @description: 设置视频时长
     * @param {Number} time
     */
    const setCurrentTime = (time) => {
      nextTick(() => {
        videoRef.value.setCurrentTime(time)
      })
    }

    /**
     * @description: 自定义指令
     * @param {*} type
     * @return {*}
     */
    const handleCustom = (type) => {
      switch (type) {
        case 'refresh':
          handleRefresh()
          break
        case 'fullScreen':
          handleFullScreen()
          break
        case 'change':

          break
        default:
          break
      }
    }

    /**
     * @description: 刷新播放器
     * @return {*}
     */
    const handleRefresh = () => {
      const { live = false } = props.options
      const currentTime = videoRef.value?.getCurrentTime() || 0
      data.isAlive = false
      nextTick(() => {
        data.isAlive = true
        if (!live) {
          setCurrentTime(currentTime)
        }
      })
    }

    /**
     * @description: 全屏
     * @return {*}
     */
    const handleFullScreen = () => {
      // const { live = false } = props.options
      // const currentTime = videoRef.value?.getCurrentTime() || 0
      // data.isAlive = false
      nextTick(() => {
        videoRef.value.toggleFullscreen()
      })
    }

    return {
      ...toRefs(data),
      videoRef,
      getProperty,
      handlePlay,
      handlePause,
      handleEnded,
      handleUpdate,
      getDuration,
      setCurrentTime,
      handleCustom
    }
  }
})
</script>
<style scoped lang='scss'>
.liveplayer{
  // width: 800px;
  // height: 500px;
  width: 100%;
  height: auto;
  position: relative;
}
::v-deep(.player-wrapper){
  .alt{
    .loading{
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        font-size: 16px;
        white-space: nowrap;
    }
    .loading span{
        font-size: 1.5em;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        animation: light 1.6s linear infinite calc(0.2s * var(--s));
    }
  }
}

@keyframes light{
  50%{
    filter:hue-rotate(360deg) blur(1px);
    color:white;
    text-shadow:0 0 10px #3498db,
                0 0 20px #3498db,
                0 0 40px #3498db,
                0 0 80px #3498db,
                0 0 160px #3498db,
                0 0 320px #3498db;
  }
}

::v-deep(.vjs-icon-replay){
  &::before{
    font-size: 22px;
  }
}
</style>
